<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Click'N'Gage - Teachers Space</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="css/style.css" type="text/css" />
    </h:head>
    <h:body>
        <div id="container">
            <div id="wrapper">
                <div id="top">
                    <ui:include src="WEB-INF/includes/login.xhtml"/>
                </div>

                <ui:include src="WEB-INF/includes/navigation.xhtml"/>

                <div id="header">
                    <ui:include src="WEB-INF/includes/header.xhtml"/>
                </div>
                <div id="content">
                    <h1>Teachers Space</h1>
                    <h:form>
                        <p>
                            Please, take your time and explore the system. Two major
                            concepts are intervined in the systems mechanics and those
                            are 'courses' and 'questions'. Following is a brief explanation
                            on the functionality regarding both of them.
                        </p>
                        <h3>Courses</h3>
                        <p>
                            Before you can start creating and issuing questions, make
                            sure that you are enrolled on the course for which you
                            would like to create a question for. If the course does not
                            exists, feel free to create one, as long as you keep in mind
                            that the course number should be unique! You will be automatically
                            enrolled on all the courses you create.
                        </p>
                        <br />
                        <div align="center">
                            <h:commandLink action="createcourse" >
                                <h:graphicImage value="images/new_course.png"/>
                            </h:commandLink>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <h:commandLink action="enrollment">
                                <h:graphicImage value="images/course.png"/>
                            </h:commandLink>
                        </div>
                        <div align="center">
                            <strong>Create a New Course</strong>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <strong>Enroll on a Course</strong>
                        </div>
                        <h3>Questions</h3>
                        <p>
                            After being enrolled on a course, fell free to create as
                            many questions as you like for said course. Please, make use
                            of our detailed question creator form to get the most advantage of
                            the system! Finally, you have to issue the question and give
                            the generated question code to your students so they can answer
                            it. This can be easily achieved from the 'Browse Questions' menu,
                            where you can also use the 'tag' system to search for existing questions
                            and observe the statistics for a specific question in a simple, yet
                            elegant way.
                        </p>
                        <br />
                        <div align="center">
                            <h:commandLink action="createquestion">
                                <h:graphicImage value="images/new_question.png"/>
                            </h:commandLink>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <h:commandLink action="questions">
                                <h:graphicImage value="images/question.png"/>
                                <f:setPropertyActionListener target="#{questionBrowserManagedBean.courseID}" value="0"/>
                            </h:commandLink>
                        </div>
                        <div align="center">
                            <strong>Create a New Question</strong>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <strong>Browse Questions</strong>
                        </div>
                    </h:form>
                </div>
                <div id="sidebar">
                    <h2>Quick Links</h2>
                    <ui:include src="WEB-INF/includes/quicklinks.xhtml"/>
                    <h2>Downloads</h2>
                    <ui:include src="WEB-INF/includes/download.xhtml"/>
                    <h2>Advertisments</h2>
                    <ui:include src="WEB-INF/includes/adsense.xhtml"/>
                </div>
                <div id="footer">
                    <ui:include src="WEB-INF/includes/footer.xhtml"/>
                </div>
            </div>
        </div>
    </h:body>
</html>